<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<link rel="stylesheet"  href="styles/pizza-style/yui-reset.css" />
<link rel="stylesheet" href="styles/pizza-style/style.css">
<!--[if IE]> <link rel="stylesheet" type="text/css" href="css/style-ie.css"> <![endif]--> 
<link rel="stylesheet"  href="styles/pizza-style/category-bgs.css">
<link rel="stylesheet" href="styles/pizza-style/impromptu.css">
<link rel="stylesheet"  href="styles/pizza-style/tooltip.css">
<link rel="stylesheet"  href="styles/pizza-style/tabs.css">   
<link rel="stylesheet"  href="styles/pizza-style/menu-modal.css">
<link rel="stylesheet"  href="styles/pizza-style/fancybox.css">
<link rel="stylesheet"  href="styles/pizza-style/skin.css" >

<c:url var="removeFromCart" value="/removeFromCart.action" />
<c:url var="addSideToCart" value="/addSideToCart.action" />
<c:url var="validateCoupon" value="/validateCoupon.action" />
<script src="js/common/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/common/submitform.js" type="text/javascript"></script>
<script src="js/common/jquery.js" type="text/javascript"></script>
<script src="js/common/lib.js" type="text/javascript"></script>
<script type="text/javascript">

function removeFromCart(obj,removeSide, removeDiscount) {  
	  // get the form values  
	  var pizza = obj.className;
	  var fromSides;
	  if($("#qty") != null)
	  {
		  fromSides = true;
	  }
	  else
	  {
		  fromSides = false;
	  }
	  $.ajax({  
	    type: "GET",  
	    url: "${removeFromCart}",  
	    data: "&pizza=" + pizza +  "&removeSide="+removeSide + "&removeDiscount="+removeDiscount,
	    success: function(response){
	    	setTimeout(submitUrl("/pizza/selectpizza.action?fromSides="+fromSides),3000);  
	    	
	     }  
	    
	  });  
	  
	}

function addSideToCart(id1) {  
	  // get the form values  
	  var id = id1;
	  var quantity = $("#qty :selected").val();
	  var fromSides = true;
	  
	  $.ajax({   
	    type: "POST",  
	    url: "${addSideToCart}",  
	    data: "&id=" + id + "&quantity=" + quantity,  
	    success: function(response){  
	    	setTimeout(submitUrl("/pizza/selectpizza.action?fromSides="+fromSides),3000);  
	     }  
	    
	  });  

	  setTimeout(submitUrl("/pizza/selectpizza.action?fromSides="+fromSides),3000);  
	}

function redeemCoupon()
{
	var code = $("#coupon-code-field").val();
	var error = true;
	if(code == null || code == "" || code == "Enter Coupon Code")
	{
		alert("Enter Coupon Code!");
	}
	else
	{
		$.getJSON('${validateCoupon}', {
						code : code,
						ajax : 'true'
					}, function(data) {
						var len = data.length;
						if(len > 0 && data[0]!= null && data[0] != "")
						{
							setTimeout(alert(data[0]),3000);
							error = true;
						}
						else
						{
							error = false;
							setTimeout(submitUrl("/pizza/redeamCouponAction.action?coupon_code="+code),6000);
						}
					});
		
	}	
	
}

function loadinparent(url, closeSelf){ 
	self.opener.location = url;
	if(closeSelf) self.close();
	
}
</script>
</head>
<body>
	<div class="menu-content" style="margin-left: 105px;">
	<div style="color: red;font-weight: bold">
		${errors}
	</div>
		<div class="menu">
			<c:choose>
			 
			 <c:when test="${fromSides}">
				<c:forEach items="${sidebean}" var="bean" varStatus="status">
					<c:if test=""></c:if>
					
				   <div id="${bean.categoryname}" class="pizza-listing">
				   
				   	  <div class="pizza-category" style="background: url('${bean.image}') repeat scroll 0 0 transparent;"></div>
						 	
				   		
				   		<c:forEach items="${bean.sides}" var="side" varStatus="status">
						 	<div class="pizza-details-item pizza-details">
						 		<p align="center">
						 			<img width="128" height="58" border="0" src="${side.image}"></p>
						 			<div style="width:165px;" class="alignleft">
						 				<div class="sides_title">
						 					<h4>${side.name}</h4>
						 					<p>Rs ${side.price} }/-only!</p>
						 				</div>
						 				<p style="margin-top: 5px; float:left;">
						 					<span class="sides-qty">Qty: </span>
						 				</p>
						 				<div class="spinner alignleft">
						 					<div class="alignleft">
						 						<select id="qty">
						 							<c:forEach items="${quantities}" varStatus="status">
						 								<option value="${status.count}" label="${status.count}">${status.count}</option>
						 							</c:forEach>
						 						</select>
						 					</div>
						 					<span style="padding:5px 0 0 5px;float: left;">
						 						<a href="#" class="add-sides-button" onclick="addSideToCart(${side.id});">
						 							<img width="34" height="14" border="0" alt="Add" src="images/pizzaimages/add_sides.png">
						 						</a>
						 					</span>
						 				</div>
						 			</div>
						 		</p>
						 	</div>
						 </c:forEach>
					</div>
				</c:forEach>
			  </c:when>
			  
			  <c:otherwise>
			  	<c:forEach items="${bean}" var="bean" varStatus="status">
					<c:if test=""></c:if>
				   <div id="${bean.categoryname}" class="pizza-listing">
				   
				   		<div class="pizza-category" style="background: url('${bean.image}') repeat scroll 0 0 transparent;"></div>
				   		
				   		<c:forEach items="${bean.pizzas}" var="pizza" varStatus="status">
						 	<div class="pizza-details-item pizza-details">
								<fieldset class="tool-tip" id="set1">
									<a>
										<p align="center">
											<img width="128" border="0" height="58" alt="" src="${pizza.image}">
										</p>
										<h4>${pizza.pizzaName}</h4>
										<p>${pizza.priceString}</p>
									</a>
								</fieldset>
								<c:url value="${pizzaConfigAction}" var="pizzaConfigUrl">
									<c:param name="pizzaId" value="${pizza.pizzaId}"></c:param>
								</c:url>
								<p>
									<a class="modal" id="pizza_8" href="#" onclick="javascript:window.open(decodeAmpersand('<c:out value="${pizzaConfigUrl}"></c:out>'), '_blank', 'width=700,height=700,status=no,toolbar=no,resizable=1,menubar=no,location=no,scrollbars=1,dependent=yes,alwaysRaised=yes');">
										<img width="105" border="0" height="21" alt="Custmoize and Add" src="images/pizzaimages/custmoize_and_add.png">
									</a>
								</p>
							</div>
						 </c:forEach>
					</div>
				</c:forEach>
			  </c:otherwise>
			  
			</c:choose>
			<c:if test="${fromSides}">
					<p style="margin-left: 35px;"><a href="#" onclick="submitUrl('/pizza/selectpizza.action')"><img border="0" alt="Back to Pizzas" src="images/pizzaimages/back_to_pizzas.png"></a></p>
			</c:if>		
			
		</div>
	</div>
	<div class="cart-details">
	
		<div id="jc-cart" class="cart-list">
			<div class=" jcarousel-skin-tango">
				<div class="jcarousel-container jcarousel-container-vertical" style="position: relative; display: block;">
					<div class="jcarousel-clip jcarousel-clip-vertical" style="position: relative;">
						<ul class="jcarousel-list jcarousel-list-vertical" id="cart_carousel" style="float: left; overflow-x: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; height: 122px; overflow-y: true;">
							<c:forEach items="${cart.pizzas}" var="pizza" varStatus="status">
								<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical jcarousel-item-placeholder jcarousel-item-placeholder-vertical" style="float: left; list-style: none outside none; height: 56px;" jcarouselindex="1">
									<div style="width:215px; height:50px;">
										<div class="edit-remove">
											<a href="#" id="removePizza" class="${status.count - 1}" onclick="removeFromCart(this,false,false);">
											<img width="11" height="10" border="0" alt="Remove Item" src="images/pizzaimages/remove_from_cart.png" style="margin-bottom: 5px;" class="remove-cart-item">
											</a>
											<br>
										</div>
										<h4>${ pizza.pizzaName}    ${pizza.quantity}</h4>
										<div class="item-price">${pizza.netPrice}</div>
									</div>
								</li>
							</c:forEach>
							<c:forEach items="${cart.sides}" var="side" varStatus="status">
								<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical jcarousel-item-placeholder jcarousel-item-placeholder-vertical" style="float: left; list-style: none outside none; height: 56px;" jcarouselindex="1">
									<div style="width:215px; height:50px;">
										<div class="edit-remove">
											<a href="#" id="removeSide" class="${status.count - 1}" onclick="removeFromCart(this,true,false);">
											<img width="11" height="10" border="0" alt="Remove Item" src="images/pizzaimages/remove_from_cart.png" style="margin-bottom: 5px;" class="remove-cart-item">
											</a>
											<br>
										</div>
										<h4>${ side.name}    ${side.quantity}</h4>
										<div class="item-price">${side.netPrice}</div>
									</div>
								</li>
							</c:forEach>
							<c:forEach items="${cart.coupons}" var="coupon" varStatus="status">
								<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical jcarousel-item-placeholder jcarousel-item-placeholder-vertical" style="float: left; list-style: none outside none; height: 56px;" jcarouselindex="1">
									<div style="width:215px; height:50px;">
										<div class="edit-remove">
											<a href="#" id="removeSide" class="${status.count - 1}" onclick="removeFromCart(this,false,true);">
											<img width="11" height="10" border="0" alt="Remove Item" src="images/pizzaimages/remove_from_cart.png" style="margin-bottom: 5px;" class="remove-cart-item">
											</a>
											<br>
										</div>
										<h4>${coupon.couponCode}    </h4>
										<div class="item-price">${coupon.discountAmt}</div>
									</div>
								</li>
							</c:forEach>
						</ul>
					</div>
					<div class="jcarousel-prev jcarousel-prev-vertical jcarousel-prev-disabled jcarousel-prev-disabled-vertical" style="display: block;" disabled="disabled"></div>
					<div class="jcarousel-next jcarousel-next-vertical" style="display: block;"></div>
				</div>
			</div>
		</div>
		
		<div class="enter-coupon-code">
			<input type="text" value="Enter Coupon Code" onblur="this.value=!this.value?'Enter Coupon Code':this.value;" onclick="this.value='';" name="coupon-code" id="coupon-code-field">
			<p align="center">
				<a href="#" id="redeem-coupon-button" onclick="redeemCoupon();"><img border="0" alt="Redeem Now" src="images/pizzaimages/redeem_now.png"></a>
			</p>
        	<ul id="coupons-used"></ul>
        	<div class="price-details">
				<h4>Total price</h4>
			</div>
			<div style="margin-left: 2px;" class="price-details-rate">
				<span class="prices">Net Price</span>
				<span id="net-price-box" class="prices">${cart.totalPrice}</span>
			</div>
			<c:if test="${cart.total_discount > 0.0}"> 
			<div style="margin-left: 2px;" class="price-details-rate">
				<span class="prices">Total Discount</span>
				<span id="service-tax-box" class="prices">${cart.total_discount}</span>
			</div>
			</c:if>
			<div style="margin-left: 2px;" class="price-details-rate">
				<span class="prices">VAT</span>
				<span id="service-tax-box" class="prices">${cart.tax}</span>
			</div>
			<div class="clr"></div>
			<div style="margin-left: 2px;" class="price-details-rate"> 
				<span style="margin-left: 2px; font-weight: bold; font-size: 14px; width: 108px;" class="prices">Grand Total</span>
				<span id="total-price-box" style="font-weight: bold; font-size: 14px; width: 108px;" class="prices">${cart.grandTotal}</span>
			</div>
			<c:choose>
				<c:when test="${!fromSides}">
					<p align="center">
     					<a href="#" class="proceed-to-sides-link">
     						<img border="0" src="images/pizzaimages/proceed_to_sides.png" alt="Add another Pizza" class="proceed-to-sides-button" onclick="submitUrl('/pizza/selectpizza.action?fromSides=true');">
    					</a>
    				</p>
				</c:when>
				<c:otherwise>
     				<p align="center">
     					<a href="#" class="proceed-to-sides-link">
     						<img border="0" src="images/pizzaimages/confirm_order.png" alt="Confirm Order" class="proceed-to-sides-button" onclick="submitUrl('/pizza/confirmorder.action');">
    					</a>
    				</p>
    			</c:otherwise>
    		</c:choose>
    	</div>
    	
	</div>
</body>
</html>